<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
	<style>
		*{
			margin:0;
			padding:0;
		}
		body{
			font-family:"微软雅黑";
			background-color:#ddd;
		}
		.module_panel {
			height: 100%;
			width: 100%;
			min-width: 100%;
			display: flex;
			flex-wrap: wrap;
		}

		.module_panel div {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			flex-direction: column;
			margin: 5px;
		}
		.module_panel div img {
			width: 115px;
			/*height: 50px;*/
		}



</style>
	<link rel="stylesheet" href="js/plugIn/layui-master/src/css/layui.css">
	<script src="js/plugIn/jquery/jquery.min.js"></script><!--jquery 要在layui之前，这样layui就不会加载内部的jquery-->
	<script src="js/plugIn/layui-master/src/layui.js"></script>

	<script src="js/common/tool.js"></script>
	<script src="config/InitConfig.js"></script>
</head>

<body>
<!-- 上方内容 -->
<!--<div class="box_top">
	<div class="head">
		<span>选择图片</span>

	</div>
</div>-->
<!-- 上方内容 -->

<div class="layui-tab layui-tab-card"  lay-filter="zt_attr_tab" style="border-width: 0px;margin:0px">
	<ul class="layui-tab-title">
		<li class="layui-this">内置背景图片-横向</li>
		<li>内置背景图片-竖向</li>
		<li>我的图库</li>
	</ul>
	<div class="layui-tab-content" >
		<div class="layui-tab-item layui-show">
			<div class="module_panel" id="listImage">
				<!-- 背景图片横向 -->

			</div>
		</div>

		<div class="layui-tab-item" >

			<div class="module_panel" id="listImageV">
				<!-- 背景图片竖向 -->

			</div>

		</div>

		<div class="layui-tab-item" >

			<div class="module_panel" id="myListImage">
				<!-- 我的图库 -->

			</div>

		</div>



	</div>
</div>




</body>
<script>

    var baseURL = localStorage.getItem("baseURL");
	layui.use(['element'], function(){
		var userId = ""; //用于查询我的组件
		var initjson;

		userId = $_GET.userId;
		var initConfig = new InitConfig();
		//读取配置文件
		$.ajaxSettings.async = false; //设置getJson同步
		$.getJSON("config/init.json", function (data){
			initjson=data;
		});

		$.ajaxSettings.async = true;//设置getJson异步

      //初始化（我的图库）
		var module_base = eval("initConfig."+initjson.initMyMoudleFunction+"()");

       // console.log(module_base);
		var myList = "";
		for (var z=0;z<module_base.length;z++){
			var imageurl =baseURL + module_base[z].file_path;
			myList+='<div>';
			myList+='<img style="cursor:pointer" onclick=\'selectSwitch("'+imageurl+'")\' src="'+imageurl+'" />';
			myList+='</div>';

		}
		$("#myListImage").html(myList);




	});



	var index = parent.layer.getFrameIndex(window.name);
	//背景图片横向
	var imageList = [
			'config/image/decoration/background/horizontal/backgroundH (4).jpg',
			'config/image/decoration/background/horizontal/backgroundH (5).jpg',
			'config/image/decoration/background/horizontal/backgroundH (13).jpg',
			'config/image/decoration/background/horizontal/backgroundH (22).jpg',
			'config/image/decoration/background/horizontal/backgroundH (29).jpg',
			'config/image/decoration/background/horizontal/backgroundH (30).jpg',
			'config/image/decoration/background/horizontal/backgroundH (35).jpg',
			'config/image/decoration/background/horizontal/backgroundH (36).jpg',
			'config/image/decoration/background/horizontal/backgroundH (38).jpg',
			'config/image/decoration/background/horizontal/backgroundH (39).jpg',
			'config/image/decoration/background/horizontal/backgroundH (40).jpg',
			'config/image/decoration/background/horizontal/backgroundH (41).jpg',
			'config/image/decoration/background/horizontal/backgroundH (43).jpg',
			'config/image/decoration/background/horizontal/backgroundH (49).jpg',
			'config/image/decoration/background/horizontal/backgroundH (50).jpg',
			'config/image/decoration/background/horizontal/backgroundH (51).jpg',
			'config/image/decoration/background/horizontal/backgroundH (52).jpg',
			'config/image/decoration/background/horizontal/backgroundH (53).jpg',
			'config/image/decoration/background/horizontal/backgroundH (54).jpg',
			'config/image/decoration/background/horizontal/backgroundH (55).jpg',
			'config/image/decoration/background/horizontal/backgroundH (56).jpg',
			'config/image/decoration/background/horizontal/backgroundH (57).jpg',
      'config/image/decoration/background/horizontal/backgroundH58.png',
      'config/image/decoration/background/horizontal/backgroundH59.png',
      'config/image/decoration/background/horizontal/backgroundH60.png',
      'config/image/decoration/background/horizontal/true.svg',
			'config/image/backimg.png'
		];

	var liList = "";
	for (var i=0;i<imageList.length;i++){

		    liList+='<div>';
			liList+='<img style="cursor:pointer" onclick=\'selectSwitch("'+imageList[i]+'")\' src="'+imageList[i]+'" />';
			liList+='</div>';
	}
	$("#listImage").html(liList);

	//背景图片竖向
	var imageListV = [
		'config/image/decoration/background/vertical/backgroundV (1).jpg',
		'config/image/decoration/background/vertical/backgroundV (2).jpg',
		'config/image/decoration/background/vertical/backgroundV (3).jpg',
		'config/image/decoration/background/vertical/backgroundV (4).jpg',
		'config/image/decoration/background/vertical/backgroundV (5).jpg',
		'config/image/decoration/background/vertical/backgroundV (6).jpg',
		'config/image/decoration/background/vertical/backgroundV (7).jpg',
		'config/image/decoration/background/vertical/backgroundV (9).jpg',
		'config/image/decoration/background/vertical/backgroundV (14).jpg',
		'config/image/decoration/background/vertical/backgroundV (15).jpg',
		'config/image/decoration/background/vertical/backgroundV (21).jpg',
		'config/image/decoration/background/vertical/backgroundV (31).jpg'

	];

	var liListV = "";
	for (var z=0;z<imageListV.length;z++){

		liListV+='<div>';
		liListV+='<img style="cursor:pointer" onclick=\'selectSwitch("'+imageListV[z]+'")\' src="'+imageListV[z]+'" />';
		liListV+='</div>';
	}
	$("#listImageV").html(liListV);



	function selectSwitch(iconUrl){

		parent.imageBackgroundUrl=iconUrl;
		parent.layer.close(index);


	}

</script>
</html>

